<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
    <!-- 在页面中声明一个将要被vue管控的DOM区域 -->
    <div id="app"> 
       <h3>count 的值为: {{ count }}</h3>
       <!-- 语法格式v-on:事件名称=”事件处理函数名称“ -->
       <button v-on:click="addCount">+1</button>
        <button v-on:click="test">默认事件参数event</button>
        <button v-on:click="test2(1)">形参覆盖默认事件参数</button>
        <button v-on:click="test3(1,$event)">两个参数都访问</button>
    </div>

    <!-- 创建vue的实例 -->
    <script>
        const vm = new Vue({
            el:'#app',  //设置被vue管控的区域, 会把data中的数据填充到这个区域中
            data: { // 页面渲染需要数据
                username: 'zs',
                count: 0
            },
            // methods的作用，就是定义事件处理函数
            methods: {
                // addCount: function() {} 可以这样定义， 但是推荐下面简写方式
                addCount() {
                    // 打印vm对象
                    console.log(vm);
                    // 修改vm中的数据, 这种方式可以达到修改数据，但是我们推荐这种方式， 推荐使用this的方式
                    //vm.count += 1
                    this.count += 1
                },

                test (e) {
                    console.log(e);
                },
                test2 (e) {
                    console.log(e);
                },
                test3 (count, e) {
                    console.log(count);
                    console.log(e);
                } 
            }
        })
    </script>
</body>
</html>